<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modbus 工业监控系统 - 主界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: #f5f5f5;
            overflow: hidden;
        }

        .app-container {
            display: flex;
            height: 100vh;
            width: 100vw;
        }

        /* 左侧导航栏 */
        .sidebar {
            width: 280px;
            background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 系统标题 */
        .app-header {
            padding: 25px 20px;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .app-title {
            color: white;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .app-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            margin-top: 5px;
        }

        /* 导航菜单 */
        .nav-menu {
            flex: 1;
            padding: 20px 0;
            overflow-y: auto;
        }

        .nav-item {
            padding: 15px 25px;
            margin: 5px 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 15px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 15px;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .nav-item.active {
            background: #3b82f6;
            color: white;
            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
        }

        .nav-icon {
            font-size: 20px;
            width: 24px;
            text-align: center;
        }

        .nav-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            margin: 10px 20px;
        }

        /* 底部状态栏 */
        .sidebar-footer {
            padding: 15px 20px;
            background: rgba(0, 0, 0, 0.2);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .connection-status {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        /* 右侧主内容区 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 顶部工具栏 */
        .top-bar {
            height: 60px;
            background: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            z-index: 10;
        }

        .page-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toolbar-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .toolbar-btn {
            padding: 8px 16px;
            border: 1px solid #e5e7eb;
            background: white;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .toolbar-btn:hover {
            background: #f8fafc;
            border-color: #3b82f6;
            color: #3b82f6;
        }

        .toolbar-btn.primary {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }

        .toolbar-btn.primary:hover {
            background: #2563eb;
        }

        /* 关于对话框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 15px;
            padding: 40px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .about-icon {
            font-size: 80px;
            margin-bottom: 20px;
        }

        .about-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .about-version {
            font-size: 14px;
            color: #999;
            margin-bottom: 25px;
        }

        .about-info {
            text-align: left;
            background: #f8fafc;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .about-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .about-row:last-child {
            border-bottom: none;
        }

        .about-label {
            color: #666;
            font-size: 14px;
        }

        .about-value {
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }

        .modal-close-btn {
            padding: 10px 30px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .modal-close-btn:hover {
            background: #2563eb;
        }

        /* 内容区域 */
        .content-area {
            flex: 1;
            overflow-y: auto;
            background: #f5f5f5;
        }

        .content-wrapper {
            padding: 20px;
        }

        /* 页面内容样式 */
        .page-content {
            display: none;
        }

        .page-content.active {
            display: block;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>

<body>
    <div class="app-container">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
            <!-- 系统标题 -->
            <div class="app-header">
                <div class="app-title">
                    🏭 Modbus 监控系统
                </div>
                <div class="app-subtitle">工业设备实时监控平台</div>
            </div>

            <!-- 导航菜单 -->
            <div class="nav-menu">
                <div class="nav-item active" onclick="switchPage('dashboard', this)">
                    <span class="nav-icon">📊</span>
                    <span>仪表盘</span>
                </div>

                <div class="nav-item" onclick="switchPage('devices', this)">
                    <span class="nav-icon">🖥️</span>
                    <span>设备管理</span>
                </div>

                <div class="nav-item" onclick="switchPage('history', this)">
                    <span class="nav-icon">📈</span>
                    <span>历史数据</span>
                </div>

                <div class="nav-item" onclick="switchPage('alarms', this)">
                    <span class="nav-icon">🚨</span>
                    <span>报警管理</span>
                </div>

                <div class="nav-divider"></div>

                <div class="nav-item" onclick="switchPage('settings', this)">
                    <span class="nav-icon">⚙️</span>
                    <span>系统设置</span>
                </div>

                <div class="nav-item" onclick="showAboutDialog()">
                    <span class="nav-icon">ℹ️</span>
                    <span>关于</span>
                </div>
            </div>

            <!-- 底部状态 -->
            <div class="sidebar-footer">
                <div class="connection-status">
                    <span class="status-dot"></span>
                    <span>已连接 2 台设备</span>
                </div>
            </div>
        </div>

        <!-- 右侧主内容区 -->
        <div class="main-content">
            <!-- 顶部工具栏 -->
            <div class="top-bar">
                <div class="page-title">
                    <span id="currentPageIcon">📊</span>
                    <span id="currentPageTitle">仪表盘</span>
                </div>

                <div class="toolbar-actions">
                    <button class="toolbar-btn" onclick="alert('刷新数据')">
                        🔄 刷新
                    </button>

                    <button class="toolbar-btn" onclick="alert('导出数据')">
                        📥 导出
                    </button>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content-area">
                <div class="content-wrapper">
                    <!-- 仪表盘页面 -->
                    <div id="dashboard-page" class="page-content active">
                        <iframe src="1_DashboardPage.html"
                            style="width: 100%; height: 80vh; border: none; border-radius: 10px;"></iframe>
                    </div>

                    <!-- 设备管理页面 -->
                    <div id="devices-page" class="page-content">
                        <iframe src="2_DeviceManagePage.html"
                            style="width: 100%; height: 80vh; border: none; border-radius: 10px;"></iframe>
                    </div>

                    <!-- 历史数据页面 -->
                    <div id="history-page" class="page-content">
                        <iframe src="3_HistoryPage.html"
                            style="width: 100%; height: 80vh; border: none; border-radius: 10px;"></iframe>
                    </div>

                    <!-- 报警管理页面 -->
                    <div id="alarms-page" class="page-content">
                        <iframe src="4_AlarmPage.html"
                            style="width: 100%; height: 80vh; border: none; border-radius: 10px;"></iframe>
                    </div>

                    <!-- 系统设置页面 -->
                    <div id="settings-page" class="page-content">
                        <iframe src="5_SettingsPage.html"
                            style="width: 100%; height: 80vh; border: none; border-radius: 10px;"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 关于对话框 -->
    <div class="modal" id="aboutModal">
        <div class="modal-content">
            <div class="about-icon">🏭</div>
            <div class="about-title">Modbus 工业监控系统</div>
            <div class="about-version">版本 v1.0.0</div>

            <div class="about-info">
                <div class="about-row">
                    <span class="about-label">软件名称</span>
                    <span class="about-value">Modbus 工业监控系统</span>
                </div>
                <div class="about-row">
                    <span class="about-label">版本号</span>
                    <span class="about-value">v1.0.0</span>
                </div>
                <div class="about-row">
                    <span class="about-label">构建日期</span>
                    <span class="about-value">2025-10-29</span>
                </div>
                <div class="about-row">
                    <span class="about-label">Qt 版本</span>
                    <span class="about-value">Qt 6.5.3</span>
                </div>
                <div class="about-row">
                    <span class="about-label">许可类型</span>
                    <span class="about-value">开源 MIT License</span>
                </div>
                <div class="about-row">
                    <span class="about-label">开发团队</span>
                    <span class="about-value">工业自动化团队</span>
                </div>
            </div>

            <button class="modal-close-btn" onclick="closeAboutDialog()">关闭</button>
        </div>
    </div>

    <script>
        const pageConfig = {
            'dashboard': { icon: '📊', title: '仪表盘' },
            'devices': { icon: '🖥️', title: '设备管理' },
            'history': { icon: '📈', title: '历史数据' },
            'alarms': { icon: '🚨', title: '报警管理' },
            'settings': { icon: '⚙️', title: '系统设置' }
        };

        function switchPage(pageName, navElement) {
            // 隐藏所有页面
            document.querySelectorAll('.page-content').forEach(page => {
                page.classList.remove('active');
            });

            // 显示选中的页面
            const targetPage = document.getElementById(pageName + '-page');
            if (targetPage) {
                targetPage.classList.add('active');
            }

            // 更新导航状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            if (navElement) {
                navElement.classList.add('active');
            }

            // 更新顶部标题
            const config = pageConfig[pageName];
            if (config) {
                document.getElementById('currentPageIcon').textContent = config.icon;
                document.getElementById('currentPageTitle').textContent = config.title;
            }
        }

        // 显示关于对话框
        function showAboutDialog() {
            document.getElementById('aboutModal').classList.add('active');
        }

        // 关闭关于对话框
        function closeAboutDialog() {
            document.getElementById('aboutModal').classList.remove('active');
        }

        // 点击背景关闭对话框
        document.getElementById('aboutModal').addEventListener('click', function (e) {
            if (e.target === this) {
                closeAboutDialog();
            }
        });

        // 页面加载完成提示
        window.addEventListener('load', function () {
            console.log('Modbus 监控系统已加载');
        });
    </script>
</body>

</html>